﻿@{ Layout = "~/Views/Shared/_ModalForm.cshtml"; }

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/cropbox/1.0/cropbox.min.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/cropbox/1.0/cropbox.min.js"))
}

<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action">
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img"> <label for="avatar">选择图片</label> </a>
            <input type="file" id="thumbnail" accept="image/*" />
        </div>
        <input type="button" id="btnUpload" class="Btnsty_peyton" value="上传" />
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="效果" />
    </div>
    <div class="cropped"></div>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    var index = '@ViewBag.Index';
    var obj = '@ViewBag.Object';
    var objId = '@ViewBag.ObjectId';
    var uploadType = '@ViewBag.UploadType';
    var newFileTitle = '@ViewBag.NewFileTitle';

    var initFileName='@ViewBag.InitFileName';
    var mode = '@ViewBag.Mode';
    var saveDatabaseUrl='@Html.Raw(ViewBag.SaveDatabaseUrl)';
    var upLoadStatus = '';

    var cropper;
    var imgFilePath;


    $(function () {
        var initThumbnailUrl = '@Url.Content("~/File/GetImage")' + '?index=' + index + '&obj=' + obj + '&objId=' + objId + '&fileName=' + initFileName;
        var options = {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: initThumbnailUrl
        };

        cropper = $('.imageBox').cropbox(options);
        $('#thumbnail').on('change', function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                //根据MIME判断上传的文件是不是图片类型
                if ((options.imgSrc).indexOf("image/") == -1) {
                    ys.msgError("文件格式错误，请上传图片类型,如：JPG,JEPG，PNG后缀的文件。");
                } else {
                    cropper = $('.imageBox').cropbox(options);
                }
            }
            reader.readAsDataURL(file);
            imgFilePath = file.name;
        });

        $('#btnCrop').on('click', function () {
            if (!checkImageFileName()) {
                return;
            }
            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        });

        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        });

        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        });

        $('#btnUpload').on('click', function () {
            Upload();
            var index = parent.layer.getFrameIndex(window.name);
            if (mode=='SingleMode') {
                waitUpload("", index);
            }
            else if (mode == 'SingleMode1'){
                waitUpload1("", index);
            }
        });


    });

    function Upload() {
        if (!checkImageFileName()) {
            return;
        }
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("fileList", img, imgFilePath);
        ys.ajaxUploadFile({
            url: '@Url.Content("~/File/Upload")' + '?index=' + index + '&obj=' + obj + '&objId=' + objId + '&newFileTitle=' + newFileTitle + '&uploadType=' + uploadType,
            data: formdata,
            async: false,
            success: function (rst) {
                if (rst.Flag == 1) {
                    SaveDatabase(rst.Data);
                    upLoadStatus = rst.Flag;
                    ys.msgSuccess(rst.Message);
                }
                else {
                    upLoadStatus = rst.Flag;
                    ys.msgError(rst.Message);
                }
            }
        });
    }

    function SaveDatabase(fileName) {
        var saveDatabaseUrl1 = '@Url.Content("~/")'+saveDatabaseUrl + (saveDatabaseUrl.includes('?') ? '&fileName=' + fileName : '?fileName=' + fileName);
        if (saveDatabaseUrl) {
            ys.ajax({
                url: saveDatabaseUrl1,
                type: "post",
                success: function (rst) {
                    if (rst.Flag == 1) {
                    }
                    else ys.msgError(rst.Message);
                }
            });
        }
    }

    function waitUpload(flag, index) {
        if (!flag) {
            setTimeout(function () {
                var flag = upLoadStatus != '';
                waitUpload(flag, index);
            }, 1000);
            return;
        }
        parent.searchGrid();
        parent.layer.close(index);
    }

    function waitUpload1(flag, index) {
        if (!flag) {
            setTimeout(function () {
                var flag = upLoadStatus != '';
                waitUpload1(flag, index);
            }, 1000);
            return;
        }
        parent.reloadLocation();
        parent.layer.close(index);
    }


    function LeaveAndRefreshParent(index) {
        parent.searchGrid();
        parent.layer.close(index);
    }
    function LeaveForm(index) {
        parent.layer.close(index);
    }


    function checkImageFileName() {
        if (ys.isNullOrEmpty(imgFilePath)) {
            ys.msgError("请先选择图片");
            return false;
        }

        else {
            return true;
        }
    }




</script>